import React,{useEffect,useState } from 'react'
import './medical.css'
import { LocationFill,MessageOutline } from 'antd-mobile-icons'
import axios from '../axios/axios'
import { Tabs } from 'antd-mobile'
import Dayjs  from 'dayjs'
import {useNavigate} from 'react-router-dom'
export default function Medical() {
    let [cate,setCate]=useState([])
    let [medical,setMedical]=useState([])
    let [idx,setIdx]=useState('6686a1e70a4798ef4b5e76ca')
    let navigate=useNavigate()
    useEffect(()=>{
        getCate()
        geMedical()
    },[])
    let getCate=async()=>{
        let res=await axios.get('/cate')  
        setCate(res.data)
    }
    let geMedical=async()=>{
        let res=await axios.get('/medical')  
        setMedical(res.data)
    }
  return (
    <div className='medical'>
        <div className='header'>
        <div>
            <LocationFill style={{fontSize:'19px'}}/>
            <span>北京</span>
        </div>
        <input type='text' placeholder='搜索药品、症状、疾病、医生、医院' />
        <div>
            <MessageOutline  style={{fontSize:'23px'}}/>
        </div>
        </div>
        <div>
        <Tabs defaultActiveKey='6686a1e70a4798ef4b5e76ca'  onChange={(e)=>{setIdx(e)}}>   
            {
                cate.map(item=>{
                    return <Tabs.Tab title={item.cname} key={item._id} ></Tabs.Tab>
                })
            }
        </Tabs>
        </div>
        <div className='medical'>
            {
                medical.map((item,index)=>{
                    if(item.cid==idx){
                    return  <div key={item._id} className='medical-item' onClick={()=>{navigate('/show/'+item._id)}}>
                            <div>
                                <p style={{fontWeight:'bold',fontSize:'17px'}}>{item.title}</p>
                                <p style={{color:'#ccc'}}>{item.text}</p>
                                <p style={{float:'left',color:'#ccc'}}>{item.num}阅读</p>
                                <p style={{float:'right',color:'#ccc',marginRight:'10px'}}>{Dayjs(item.date).format('YYYY-MM-DD')}</p>
                            </div>
                            <img src={item.img} style={{width:'130px',height:'85px',borderRadius:'20px'}}></img>        
                    </div>
                    }               
                })
            }
        </div>
    </div>
  )
}
